<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>jQuery Wookmark Plug-in Example</title>
  <meta name="description" content="An very basic example of how to use the Wookmark jQuery plug-in.">
  <meta name="author" content="Christoph Ono">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- CSS Reset -->
  <link rel="stylesheet" href="../css/reset.css">

  <!-- Styling for your grid blocks -->
  <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <div id="container">
    <header>
      <h1>jQuery Wookmark Plug-in Example</h1>
      <p>Click one of the words below to filter the grid. Only one filter can be selected at a time.</p>
    </header>
    <div id="main" role="main">

      <!--
        These are our filter options. The "data-filter" classes are used to identify which
        grid items to show.
        -->
      <ol id="filters">
        <li data-filter="amsterdam">Amsterdam</li>
        <li data-filter="tokyo">Tokyo</li>
        <li data-filter="london">London</li>
        <li data-filter="paris">Paris</li>
        <li data-filter="berlin">Berlin</li>
        <li data-filter="sport">Sport</li>
        <li data-filter="fashion">Fashion</li>
        <li data-filter="video">Video</li>
        <li data-filter="art">Art</li>
      </ol>

      <ul id="tiles">
        <!--
          These are our grid items. Notice how each one has classes assigned that
          are used for filtering. The classes match the "data-filter" properties above.
          -->
        <li class="london art"><img src="images/image_1.jpg" height="283" width="200"><p>London Art</p></li>
        <li class="berlin art"><img src="images/image_2.jpg" height="300" width="200"><p>Berlin Art</p></li>
        <li class="berlin video"><img src="images/image_3.jpg" height="252" width="200"><p>Berlin Video</p></li>
        <li class="tokyo fashion"><img src="images/image_4.jpg" height="158" width="200"><p>Tokyo Fashion</p></li>
        <li class="berlin art"><img src="images/image_5.jpg" height="300" width="200"><p>Berlin Art</p></li>
        <li class="tokyo fashion"><img src="images/image_6.jpg" height="297" width="200"><p>Tokyo Fashion</p></li>
        <li class="london art"><img src="images/image_7.jpg" height="200" width="200"><p>London Art</p></li>
        <li class="tokyo video"><img src="images/image_8.jpg" height="200" width="200"><p>Tokyo Video</p></li>
        <li class="tokyo art"><img src="images/image_9.jpg" height="398" width="200"><p>Tokyo Art</p></li>
        <li class="berlin fashion"><img src="images/image_10.jpg" height="267" width="200"><p>Berlin Fashion</p></li>
        <li class="amsterdam art"><img src="images/image_1.jpg" height="283" width="200"><p>Amsterdam Art</p></li>
        <li class="paris video"><img src="images/image_2.jpg" height="300" width="200"><p>Paris Video</p></li>
        <li class="london video"><img src="images/image_3.jpg" height="252" width="200"><p>London Video</p></li>
        <li class="london video"><img src="images/image_4.jpg" height="158" width="200"><p>London Video</p></li>
        <li class="amsterdam video"><img src="images/image_5.jpg" height="300" width="200"><p>Amsterdam Video</p></li>
        <li class="tokyo fashion"><img src="images/image_6.jpg" height="297" width="200"><p>Tokyo Fashion</p></li>
        <li class="tokyo sport"><img src="images/image_7.jpg" height="200" width="200"><p>Tokyo Sport</p></li>
        <li class="berlin video"><img src="images/image_8.jpg" height="200" width="200"><p>Berlin Video</p></li>
        <li class="amsterdam fashion"><img src="images/image_9.jpg" height="398" width="200"><p>Amsterdam Fashion</p></li>
        <li class="berlin sport"><img src="images/image_10.jpg" height="267" width="200"><p>Berlin Sport</p></li>
        <li class="paris video"><img src="images/image_1.jpg" height="283" width="200"><p>Paris Video</p></li>
        <li class="tokyo sport"><img src="images/image_2.jpg" height="300" width="200"><p>Tokyo Sport</p></li>
        <li class="amsterdam art"><img src="images/image_3.jpg" height="252" width="200"><p>Amsterdam Art</p></li>
        <li class="berlin sport"><img src="images/image_4.jpg" height="158" width="200"><p>Berlin Sport</p></li>
        <li class="paris art"><img src="images/image_5.jpg" height="300" width="200"><p>Paris Art</p></li>
        <li class="berlin art"><img src="images/image_6.jpg" height="297" width="200"><p>Berlin Art</p></li>
        <li class="london art"><img src="images/image_7.jpg" height="200" width="200"><p>London Art</p></li>
        <li class="london video"><img src="images/image_8.jpg" height="200" width="200"><p>London Video</p></li>
        <li class="london video"><img src="images/image_9.jpg" height="398" width="200"><p>London Video</p></li>
        <li class="paris video"><img src="images/image_10.jpg" height="267" width="200"><p>Paris Video</p></li>
        <!-- End of grid blocks -->
      </ul>

    </div>
    <footer>

    </footer>
  </div>

  <!-- include jQuery -->
  <script src="../libs/jquery-1.9.1.min.js"></script>

  <!-- Include the plug-in -->
  <script src="../jquery.wookmark.js"></script>

  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    $(document).ready(new function() {
      // This filter is later used as the selector for which grid items to show.
      var filter = '';
      var handler;

      // Prepare layout options.
      var options = {
        autoResize: true, // This will auto-update the layout when the browser window is resized.
        container: $('#main'), // Optional, used for some extra CSS styling
        offset: 2, // Optional, the distance between grid items
        itemWidth: 210 // Optional, the width of a grid item
      };

      // This function filters the grid when a change is made.
      var refresh = function() {
        // This hides all grid items ("inactive" is a CSS class that sets opacity to 0).
        $('#tiles li').addClass('inactive');

        // Create a new layout selector with our filter.
        handler = $(filter);

        // This shows the items we want visible.
        handler.removeClass("inactive");

        // This updates the layout.
        handler.wookmark(options);
      }

      /**
       * This function checks all filter options to see which ones are active.
       * If they have changed, it also calls a refresh (see above).
       */
      var updateFilters = function() {
        var oldFilter = filter;
        filter = '';
        var filters = [];

        // Collect filter list.
        var lis = $('#filters li');
        var i=0, length=lis.length, li;
        for(; i<length; i++) {
          li = $(lis[i]);
          if(li.hasClass('active')) {
            filters.push('#tiles li.'+li.attr('data-filter'));
          }
        }

        // If no filters active, set default to show all.
        if(filters.length == 0) {
          filters.push('#tiles li');
        }

        // Finalize our filter selector for jQuery.
        filter = filters.join(', ');

        // If the filter has changed, update the layout.
        if(oldFilter != filter) {
          refresh();
        }
      };

      /**
       * When a filter is clicked, toggle it's active state and refresh.
       */
      var onClickFilter = function(event) {
        var item = $(event.currentTarget);
        $('#filters li').removeClass('active');
        item.toggleClass('active');
        updateFilters();
      }

      // Capture filter click events.
      $('#filters li').click(onClickFilter);

      // Do initial update (shows all items).
      updateFilters();
    });
  </script>

</body>
</html>
